<template>
  <div class="p-d">
    <div class="app-container">
      <div class="b-f p-l p-r p-t">
        <el-form :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch">
          <el-form-item label="角色名称"
            prop="roleName">
            <el-input v-model="queryParams.roleName"
              placeholder="请输入角色名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <!-- <el-form-item label="创建时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
        </el-form-item> -->
          <el-form-item>
            <el-button type="primary"
              @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="b-f p-l p-r p-t m-t">
        <el-row :gutter="10"
          class="mb8">
          <el-col :span="24">
            <el-button type="primary"
              @click="handleAdd"
              size="small">新增角色</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
          <el-button type="success" :disabled="single" @click="handleUpdate">修改</el-button>
        </el-col> -->
          <!-- <el-col :span="1.5">
          <el-button type="danger" :disabled="multiple" @click="handleDelete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" @click="handleExport">导出</el-button>
        </el-col> -->
        </el-row>
        <el-table class="m-t"
          v-loading="loading"
          :data="roleList"
          @selection-change="handleSelectionChange"
          border>
          <el-table-column type="selection"
            width="55"
            align="center" />
          <el-table-column label="序号"
            prop="roleId"
            width="80" />
          <el-table-column label="角色名称"
            prop="roleName"
            :show-overflow-tooltip="true"
            width="200" />
          <el-table-column label="主要职责"
            prop="content" />
          <!-- <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="120">
            <template slot-scope="scope"
              v-if="scope.row.roleId !== 1">
              <el-button size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
      <!-- 添加或修改角色配置对话框 -->
      <el-dialog :title="title"
        :visible.sync="open"
        width="500px"
        append-to-body>
        <el-form ref="form"
          :model="form"
          :rules="rules"
          label-width="100px">
          <el-form-item label="角色名称"
            prop="roleName">
            <el-input v-model="form.roleName"
              placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色顺序"
            prop="roleSort">
            <el-input-number v-model="form.roleSort"
              controls-position="right"
              :min="0" />
          </el-form-item>
          <!-- <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
          <el-form-item label="菜单权限">
            <!-- <el-checkbox v-model="menuExpand"
              @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
            <el-checkbox v-model="menuNodeAll"
              @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
            <el-checkbox v-model="form.menuCheckStrictly"
              @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> -->
            <el-tree class="tree-border"
              :data="menuOptions"
              show-checkbox
              ref="menu"
              node-key="id"
              :check-strictly="!form.menuCheckStrictly"
              empty-text="加载中，请稍候"
              :props="defaultProps"></el-tree>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.content"
              type="textarea"
              placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
          class="dialog-footer">
          <el-button type="primary"
            @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 分配角色数据权限对话框 -->
      <el-dialog :title="title"
        :visible.sync="openDataScope"
        width="500px"
        append-to-body>
        <el-form :model="form"
          label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.roleName"
              :disabled="true" />
          </el-form-item>
          <el-form-item label="权限范围">
            <el-select v-model="form.dataScope"
              @change="dataScopeSelectChange">
              <el-option v-for="item in dataScopeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据权限"
            v-show="form.dataScope == 2">
            <!-- <el-checkbox v-model="deptExpand"
              @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
            <el-checkbox v-model="deptNodeAll"
              @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
            <el-checkbox v-model="form.deptCheckStrictly"
              @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> -->
            <el-tree class="tree-border"
              :data="deptOptions"
              show-checkbox
              default-expand-all
              ref="dept"
              node-key="id"
              :check-strictly="!form.deptCheckStrictly"
              empty-text="加载中，请稍候"
              :props="defaultProps"></el-tree>
          </el-form-item>
        </el-form>
        <div slot="footer"
          class="dialog-footer">
          <el-button type="primary"
            @click="submitDataScope">确 定</el-button>
          <el-button @click="cancelDataScope">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  // listRole,
  getRole,
  delRole,
  addRole,
  updateRole,
  dataScope,
  changeRoleStatus,
  deptTreeSelect
} from '@/api/system/role'
export default {
  name: 'Role',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 数据范围选项
      dataScopeOptions: [
        {
          value: '1',
          label: '全部数据权限'
        },
        {
          value: '2',
          label: '自定数据权限'
        },
        {
          value: '3',
          label: '本部门数据权限'
        },
        {
          value: '4',
          label: '本部门及以下数据权限'
        },
        {
          value: '5',
          label: '仅本人数据权限'
        }
      ],
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        roleSort: [
          { required: true, message: '角色顺序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      let res = {
        total: 7,
        rows: [
          {
            roleId: 1,
            roleName: '超级管理员',
            roleKey: 'superadmin',
            roleSort: 1,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '超级管理员',
            createTime: 1703674940000,
            flag: false,
            superAdmin: true,
            content: '平台最大管理员角色',
            checkedKeys: [21, 211, 212, 213, 214, 215, 22, 221, 222, 223]
          },
          {
            roleId: 2,
            roleName: '主管机关',
            roleKey: 'common',
            roleSort: 2,
            dataScope: '2',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '普通角色',
            createTime: 1703674940000,
            flag: false,
            superAdmin: false,
            content: '全面了解掌握科研设施与仪器共享资源状况和共享服务情况',
            checkedKeys: [21, 211, 212, 213, 214, 215, 22, 221, 222, 223]
          },
          {
            roleId: 3,
            roleName: '大单位职能部门机关',
            roleKey: '1',
            roleSort: 3,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '1',
            createTime: null,
            flag: false,
            superAdmin: false,
            content: '各大单位承担科研管理工作职责的机关部门'
          },
          {
            roleId: 4,
            roleName: '管理单位管理员',
            roleKey: '1',
            roleSort: 4,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '1',
            createTime: null,
            flag: false,
            superAdmin: false,
            content: '直接管理使用重大科研基础设施和大型科研仪器的单位'
          },
          {
            roleId: 5,
            roleName: '设施仪器管理员',
            roleKey: '1',
            roleSort: 5,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '1',
            createTime: null,
            flag: false,
            superAdmin: false,
            content: '负责共享资源的数据维护和共享服务的事务处理等工作',
            checkedKeys: [21, 211, 212, 213, 214, 215, 22, 221, 222, 223]
          },
          {
            roleId: 6,
            roleName: '用户单位管理员',
            roleKey: '1',
            roleSort: 5,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '1',
            createTime: null,
            flag: false,
            superAdmin: false,
            content: '主要使用管理单位共享资源的单位'
          },
          {
            roleId: 7,
            roleName: '平台中心管理员',
            roleKey: '1',
            roleSort: 5,
            dataScope: '1',
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            status: '0',
            remark: '1',
            createTime: null,
            flag: false,
            superAdmin: false,
            content: '负责共享管理平台建设管和运行维护的军队单位'
          }
        ],
        code: 200,
        msg: '查询成功'
      }
      this.loading = true
      // listRole({...this.queryParams}).then(
      //   (response) => {
      this.roleList = res.rows
      this.total = res.total
      this.loading = false
      //   }
      // );
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      this.menuOptions = [
        {
          id: 1,
          name: 'equipmentChart',
          path: '/equipmentChart',
          hidden: false,
          title: '共享态势',
          icon: 'project',
          noCache: false,
          link: null,
          children: []
        },
        {
          id: 2,
          name: 'Information',
          path: '/Information',
          hidden: false,
          redirect: 'noRedirect',
          component: 'Layout',
          alwaysShow: true,
          title: '共享信息管理',
          icon: 'project',
          noCache: false,
          link: null,
          children: [
            {
              id: 21,
              name: 'content',
              path: '/content',
              hidden: false,
              title: '内容管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 211,
                  name: 'facilities',
                  path: '/facilities',
                  hidden: false,
                  title: '科研设施信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 212,
                  name: 'instrument',
                  path: '/instrument',
                  hidden: false,
                  title: '仪器设备信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 213,
                  name: 'software',
                  path: '/software',
                  hidden: false,
                  title: '软件系统信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 214,
                  name: 'localResources',
                  path: '/localResources',
                  hidden: false,
                  title: '地方资源信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 215,
                  name: 'synthesisInfo',
                  path: '/synthesisInfo',
                  hidden: false,
                  title: '共享管理信息',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              name: 'contentPublish',
              path: '/contentPublish',
              hidden: false,
              title: '信息发布',
              icon: '',
              noCache: false,
              link: null,
              id: 22,
              children: [
                {
                  id: 221,
                  name: 'servicePublish',
                  path: '/servicePublish',
                  hidden: false,
                  title: '共享资源信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 222,
                  name: 'localServicePublish',
                  path: '/localServicePublish',
                  hidden: false,
                  title: '地方共享信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 223,
                  name: 'synthesisInfoPublish',
                  path: '/synthesisInfoPublish',
                  hidden: false,
                  title: '共享管理信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              id: 23,
              name: 'serviceManage',
              path: '/serviceManage',
              hidden: false,
              redirect: 'noRedirect',
              component: 'Layout',
              alwaysShow: true,
              title: '服务管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 231,
                  name: 'adviceManage',
                  path: '/adviceManage',
                  hidden: false,
                  title: '建言献策信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 232,
                  name: 'consultManage',
                  path: '/consultManage',
                  hidden: false,
                  title: '服务咨询信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 233,
                  name: 'makeManage',
                  path: '/makeManage',
                  hidden: false,
                  title: '服务预约信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 234,
                  name: 'recordLog',
                  path: '/recordLog',
                  hidden: false,
                  title: '共享服务记录',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 235,
                  name: 'localRecordLog',
                  path: '/localRecordLog',
                  hidden: false,
                  title: '地方共享使用情况',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              id: 24,
              name: 'evaluateInfo',
              path: '/evaluateInfo',
              hidden: false,
              title: '评价考核自评',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 25,
              name: 'unitManagement',
              path: '/unitManagement',
              hidden: false,
              redirect: 'noRedirect',
              component: 'Layout',
              alwaysShow: true,
              title: '单位信息管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 251,
                  name: 'largeUnits',
                  path: '/largeUnits',
                  hidden: false,
                  title: '大单位职能部门',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 252,
                  name: 'managementUnit',
                  path: '/managementUnit',
                  hidden: false,
                  title: '管理单位信息',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            }
          ]
        },
        {
          id: 3,
          hidden: false,
          name: 'statisticsPage',
          path: '/statisticsPage',
          component: 'chartView/chartView',
          title: '统计分析',
          icon: 'layout',
          noCache: false,
          link: null
        },
        {
          id: 4,
          name: 'System',
          path: '/system',
          hidden: false,
          redirect: 'noRedirect',
          component: 'Layout',
          alwaysShow: true,
          title: '系统管理',
          icon: 'settingIcon',
          noCache: false,
          link: null,
          children: [
            {
              id: 41,
              name: '/users',
              path: '/users',
              hidden: false,
              title: '账号管理',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 42,
              name: '/role',
              path: '/role',
              hidden: false,
              component: 'system/role/index',
              title: '权限管理',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 43,
              name: '/log',
              path: '/log',
              hidden: false,
              component: 'system/log/index',
              title: '日志审计',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 44,
              name: '/dict',
              path: '/dict',
              hidden: false,
              component: 'system/dict/index',
              title: '数据字典',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 45,
              name: '/backup',
              path: '/backup',
              hidden: false,
              component: 'system/backup/index',
              title: '备份恢复',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 46,
              name: '/param',
              path: '/param',
              hidden: false,
              component: 'system/param/index',
              title: '系统参数',
              icon: '',
              noCache: false,
              link: null
            }
          ]
        }
      ]
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys()
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    // 所有部门节点数据
    getDeptAllCheckedKeys() {
      // 目前被选中的部门节点
      let checkedKeys = this.$refs.dept.getCheckedKeys()
      // 半选中的部门节点
      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect() {
      // return roleMenuTreeselect(roleId).then(response => {
      //   this.menuOptions = response.data.menus
      //   return response
      // })
      this.menuOptions = [
        {
          id: 1,
          name: 'equipmentChart',
          path: '/equipmentChart',
          hidden: false,
          title: '共享态势',
          icon: 'project',
          noCache: false,
          link: null,
          children: []
        },
        {
          id: 2,
          name: 'Information',
          path: '/Information',
          hidden: false,
          redirect: 'noRedirect',
          component: 'Layout',
          alwaysShow: true,
          title: '共享信息管理',
          icon: 'project',
          noCache: false,
          link: null,
          children: [
            {
              id: 21,
              name: 'content',
              path: '/content',
              hidden: false,
              title: '内容管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 211,
                  name: 'facilities',
                  path: '/facilities',
                  hidden: false,
                  title: '科研设施信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 212,
                  name: 'instrument',
                  path: '/instrument',
                  hidden: false,
                  title: '仪器设备信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 213,
                  name: 'software',
                  path: '/software',
                  hidden: false,
                  title: '软件系统信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 214,
                  name: 'localResources',
                  path: '/localResources',
                  hidden: false,
                  title: '地方资源信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 215,
                  name: 'synthesisInfo',
                  path: '/synthesisInfo',
                  hidden: false,
                  title: '共享管理信息',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              name: 'contentPublish',
              path: '/contentPublish',
              hidden: false,
              title: '信息发布',
              icon: '',
              noCache: false,
              link: null,
              id: 22,
              children: [
                {
                  id: 221,
                  name: 'servicePublish',
                  path: '/servicePublish',
                  hidden: false,
                  title: '共享资源信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 222,
                  name: 'localServicePublish',
                  path: '/localServicePublish',
                  hidden: false,
                  title: '地方共享信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 223,
                  name: 'synthesisInfoPublish',
                  path: '/synthesisInfoPublish',
                  hidden: false,
                  title: '共享管理信息发布',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              id: 23,
              name: 'serviceManage',
              path: '/serviceManage',
              hidden: false,
              redirect: 'noRedirect',
              component: 'Layout',
              alwaysShow: true,
              title: '服务管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 231,
                  name: 'adviceManage',
                  path: '/adviceManage',
                  hidden: false,
                  title: '建言献策信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 232,
                  name: 'consultManage',
                  path: '/consultManage',
                  hidden: false,
                  title: '服务咨询信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 233,
                  name: 'makeManage',
                  path: '/makeManage',
                  hidden: false,
                  title: '服务预约信息',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 234,
                  name: 'recordLog',
                  path: '/recordLog',
                  hidden: false,
                  title: '共享服务记录',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 235,
                  name: 'localRecordLog',
                  path: '/localRecordLog',
                  hidden: false,
                  title: '地方共享使用情况',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            },
            {
              id: 24,
              name: 'evaluateInfo',
              path: '/evaluateInfo',
              hidden: false,
              title: '评价考核自评',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 25,
              name: 'unitManagement',
              path: '/unitManagement',
              hidden: false,
              redirect: 'noRedirect',
              component: 'Layout',
              alwaysShow: true,
              title: '单位信息管理',
              icon: '',
              noCache: false,
              link: null,
              children: [
                {
                  id: 251,
                  name: 'largeUnits',
                  path: '/largeUnits',
                  hidden: false,
                  title: '大单位职能部门',
                  icon: '',
                  noCache: false,
                  link: null
                },
                {
                  id: 252,
                  name: 'managementUnit',
                  path: '/managementUnit',
                  hidden: false,
                  title: '管理单位信息',
                  icon: '',
                  noCache: false,
                  link: null
                }
              ]
            }
          ]
        },
        {
          id: 3,
          hidden: false,
          name: 'statisticsPage',
          path: '/statisticsPage',
          component: 'chartView/chartView',
          title: '统计分析',
          icon: 'layout',
          noCache: false,
          link: null
        },
        {
          id: 4,
          name: 'System',
          path: '/system',
          hidden: false,
          redirect: 'noRedirect',
          component: 'Layout',
          alwaysShow: true,
          title: '系统管理',
          icon: 'settingIcon',
          noCache: false,
          link: null,
          children: [
            {
              id: 41,
              name: '/users',
              path: '/users',
              hidden: false,
              title: '账号管理',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 42,
              name: '/role',
              path: '/role',
              hidden: false,
              component: 'system/role/index',
              title: '权限管理',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 43,
              name: '/log',
              path: '/log',
              hidden: false,
              component: 'system/log/index',
              title: '日志审计',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 44,
              name: '/dict',
              path: '/dict',
              hidden: false,
              component: 'system/dict/index',
              title: '数据字典',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 45,
              name: '/backup',
              path: '/backup',
              hidden: false,
              component: 'system/backup/index',
              title: '备份恢复',
              icon: '',
              noCache: false,
              link: null
            },
            {
              id: 46,
              name: '/param',
              path: '/param',
              hidden: false,
              component: 'system/param/index',
              title: '系统参数',
              icon: '',
              noCache: false,
              link: null
            }
          ]
        }
      ]
      return this.menuOptions
    },
    /** 根据角色ID查询部门树结构 */
    getDeptTree(roleId) {
      return deptTreeSelect(roleId).then(response => {
        this.deptOptions = response.data.depts
        return response
      })
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.status === '0' ? '启用' : '停用'
      this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
        .then(function () {
          return changeRoleStatus(row.roleId, row.status)
        })
        .then(() => {
          this.$message(text + '成功')
        })
        .catch(function () {
          row.status = row.status === '0' ? '1' : '0'
        })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 取消按钮（数据权限）
    cancelDataScope() {
      this.openDataScope = false
      this.reset()
    },
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([])
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDataScope':
          this.handleDataScope(row)
          break
        case 'handleAuthUser':
          this.handleAuthUser(row)
          break
        default:
          break
      }
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == 'menu') {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == 'menu') {
        this.form.menuCheckStrictly = value ? true : false
      } else if (type == 'dept') {
        this.form.deptCheckStrictly = value ? true : false
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.getMenuTreeselect()
      this.open = true
      this.title = '添加角色'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = row
      this.reset()
      // const roleId = row.roleId || this.ids
      this.getRoleMenuTreeselect()
      this.open = true
      this.$nextTick(() => {
        let checkedKeys = row.checkedKeys
        checkedKeys.forEach(v => {
          this.$nextTick(() => {
            this.$refs.menu.setChecked(v, true, false)
          })
        })
      })
      this.title = '修改角色'
      //   this.$nextTick(() => {
      //     roleMenu.then(res => {
      //       let checkedKeys = res.data.checkedKeys
      //       checkedKeys.forEach(v => {
      //         this.$nextTick(() => {
      //           this.$refs.menu.setChecked(v, true, false)
      //         })
      //       })
      //     })
      // })
    },
    /** 选择角色权限范围触发 */
    dataScopeSelectChange(value) {
      if (value !== '2') {
        this.$refs.dept.setCheckedKeys([])
      }
    },
    /** 分配数据权限操作 */
    handleDataScope(row) {
      this.reset()
      const deptTreeSelect = this.getDeptTree(row.roleId)
      getRole(row.roleId).then(response => {
        this.form = response.data
        this.openDataScope = true
        this.$nextTick(() => {
          deptTreeSelect.then(res => {
            this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
          })
        })
        this.title = '分配数据权限'
      })
    },
    /** 分配用户操作 */
    handleAuthUser: function (row) {
      const roleId = row.roleId
      this.$router.push('/system/role-auth/user/' + roleId)
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.roleId != undefined) {
            this.form.menuIds = this.getMenuAllCheckedKeys()
            updateRole(this.form).then(() => {
              this.$message('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            this.form.menuIds = this.getMenuAllCheckedKeys()
            addRole(this.form).then(() => {
              this.$message('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 提交按钮（数据权限） */
    submitDataScope: function () {
      if (this.form.roleId != undefined) {
        this.form.deptIds = this.getDeptAllCheckedKeys()
        dataScope(this.form).then(() => {
          this.$message('修改成功')
          this.openDataScope = false
          this.getList()
        })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.roleId || this.ids
      this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
        .then(function () {
          return delRole(roleIds)
        })
        .then(() => {
          this.getList()
          this.$message('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/role/export',
        {
          ...this.queryParams
        },
        `role_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>
<style scoped lang="less">
:deep(.el-table .cell) {
  font-size: 16px;
}
:deep(.el-table th > .cell) {
  font-size: 18px;
}
</style>
